<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" th:href="@{favicon.ico}">
    <link th:href="@{/zTree_v3/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <style type="text/css">
        .ztree li span.button.add{margin-right:2px;background-position:-144px 0;vertical-align:top;*vertical-align:middle}
    </style>

</head>

<body class="gray-bg">
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>


    <script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/zTree_v3/js/jquery.ztree.core.js}"></script>
<script th:src="@{/zTree_v3/js/jquery.ztree.excheck.js}"></script>
<script th:src="@{/zTree_v3/js/jquery.ztree.exedit.js}"></script>
<script th:inline="javascript">
    layui.use('layer', function(){
        var layer = layui.layer;
    })
    <!--
    var setting = {
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        edit: {
            enable: true,
            editNameSelectAll: true,
            showRemoveBtn: showRemoveBtn,
            showRenameBtn: showRenameBtn,
            removeTitle:"删除节点",//设置鼠标移动到 删除按钮 上时，浏览器自动弹出的辅助信息内容
            renameTitle:"重新命名",//设置鼠标移动到 编辑名称按钮 上时，浏览器自动弹出的辅助信息内容
            drag:{
                isCopy:false,
                isMove:true,
                prev:canPrev,
                next:true,
                inner:true
            }
        },
        data: {
            key: {
                isParent: "isParent",
                children: "children",
                name: "classifyName",
                title: "",
                url: "url",
                icon: "icon"
            },
            simpleData: {
                enable: true,
                idKey: "classId",
                pIdKey: "upperRankId",
                rootPId: null
            }
        },
        callback: {
            //beforeDrag: beforeDrag,
            beforeEditName: beforeEditName,
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRemove: onRemove,
            onRename: onRename,
            beforeDrag:zTreeBeforeDrag,//拖拽验证
            beforeDrop:zTreeBeforeDrop,//拖拽
        }
    };
    var log, className = "dark";

    //拖拽排序
    function canPrev(treeId, nodes, targetNode) {
        //禁止拖拽到顶级节点前面的操作
        /*	if(!targetNode.pId){
                alert('禁止拖拽到根节点前面!');
                 return false;
            }*/
        return true;
    }


    //禁止拖拽到根节点后面的操作
    function canNext(treeId, nodes, targetNode) {
        /*if(targetNode.isParent){
            alert('禁止拖拽到父节点后面!');
             return false;
        }*/
        return true;
    }

    //拖拽之前的事件回调函数,判断是否允许拖拽
    function zTreeBeforeDrag(treeId, treeNodes){
        for (var i=0,l=treeNodes.length; i<l; i++) {
            if (treeNodes[i].drag === false) {
                return false;
            }
            else if (treeNodes[i].classId==78) {
                return false;
            }
        }
        return true;
    }
    //于捕获节点拖拽操作结束之前的事件回调函数,并且根据返回值确定是否允许此拖拽操作
    function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType, isCopy){
        console.log(moveType);
        if(moveType=='inner' && confirm('确定要将[ '+treeNodes[0].classifyName+' ]移动到[ '+targetNode.classifyName+' ]下?')){
            $.ajax({
                url: '/updateUpperRankId?classId='+treeNodes[0].classId+"&upperRankId="+targetNode.classId,
                type: 'post',
                dataType: 'json',
                contentType: 'application/json',
                async: false,
                success: function(data){
                    if(data.data>0)
                    {
                        layer.msg("调整成功!");
                    }
                    else
                    {
                        layer.msg("调整失败!");
                    }
                }
            });
            return true;
        }else if(moveType=='prev' && confirm('确定要将[ '+treeNodes[0].classifyName+' ]移动到[ '+targetNode.classifyName+' ]的前面?')){
            $.ajax({
                url: '/updateUpperRankId?classId='+treeNodes[0].classId+"&upperRankId="+targetNode.classId,
                type: 'post',
                dataType: 'json',
                contentType: 'application/json',
                async: false,
                success: function(data){
                    if(data.data>0)
                    {
                        layer.msg("调整成功!");
                    }
                    else
                    {
                        layer.msg("调整失败!");
                    }
                }
            });
            return true;
        }else if(moveType=='next' && confirm('确定要将[ '+treeNodes[0].classifyName+' ]移动到[ '+targetNode.classifyName+' ]的后面?')){
            $.ajax({
                url: '/updateUpperRankId?classId='+treeNodes[0].classId+"&upperRankId="+targetNode.classId,
                type: 'post',
                dataType: 'json',
                contentType: 'application/json',
                async: false,
                success: function(data){
                    if(data.data>0)
                    {
                        layer.msg("调整成功!");
                    }
                    else
                    {
                        layer.msg("调整失败!");
                    }
                }
            });
            return true;
        }else{
            return false;
        }
    }

    function beforeEditName(treeId, treeNode) {
        className = (className === "dark" ? "":"dark");
        showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.classifyName);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        setTimeout(function() {
            if (confirm("进入节点 -- " + treeNode.classifyName + " 的编辑状态吗？")) {
                setTimeout(function() {
                    zTree.editName(treeNode);
                }, 111);
            }
        }, 111);

        return false;

    }
    function beforeRemove(treeId, treeNode) {
        var isDel = false;
        if(treeNode.isParent) {
            layer.msg('该分类含有子节点，不能执行删除操作');
        } else {
            if(window.confirm('你确定要删除'+treeNode.classifyName+'菜单吗')){
                $.ajax({
                    url: '/deleteClassify?classId='+treeNode.classId,
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json',
                    async: false,
                    success: function(data){
                        if(data.data>0)
                        {
                            isDel= true;
                        }
                        else
                        {
                            layer.msg("删除失败!");
                        }
                    }
                });
            }else{
                isDel=false;
            }
        }
        return isDel;
    }
    function onRemove(e, treeId, treeNode) {
        layer.msg("删除成功!");
    }
    function beforeRename(treeId, treeNode, newName, isCancel) {
        var  isUpdate=true;
        var zTree;
        if (newName.length == 0) {
            zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.cancelEditName();
            layer.msg("节点名称不能为空");
            isUpdate=false;
        }
        return isUpdate;
    }
    function onRename(e, treeId, treeNode, isCancel) {
        $.ajax({
            url: '/addOrUpdateClassify?classifyName='+treeNode.classifyName+'&classId='+treeNode.classId+'&upperRankId=0',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            async: false,
            success: function(data){
                if(data.data>0)
                {
                    layer.msg("修改成功!");
                }
                else
                {
                    layer.msg("修改失败!");
                }
            }
        });
    }
    function showRemoveBtn(treeId, treeNode) {
        return treeNode;
        //return !treeNode.isFirstNode;
    }
    function showRenameBtn(treeId, treeNode) {
        return treeNode;
        //return !treeNode.isLastNode;
    }
    function showLog(str) {
        if (!log) log = $("#log");
        log.append("<li class='"+className+"'>"+str+"</li>");
        if(log.children("li").length > 8) {
            log.get(0).removeChild(log.children("li")[0]);
        }
    }
    function getTime() {
        var now= new Date(),
            h=now.getHours(),
            m=now.getMinutes(),
            s=now.getSeconds(),
            ms=now.getMilliseconds();
        return (h+":"+m+":"+s+ " " +ms);
    }

    var newCount = 1;


    var addName='';
    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            //增加树节点
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            //将新节点添加到数据库中
            layer.open({
                type: 2,
                area: ['400px', '250px'],
                fixed: false, //不固定
                btn: ['确定', '取消'],
                maxmin: true,
                content: '/addClassify',
                success:function(layero,index){
                },
                yes: function (index, layero) {
                    var body = layer.getChildFrame('body', index); //得到iframe页的body内容
                    addName="";
                    addName=body.find("#firstname").val();
                    layer.close(index);
            },
                end:function(){
                    if(addName=="")
                    {
                        return;
                    }
                    $.ajax({
                        url: '/addOrUpdateClassify?classifyName='+addName+'&upperRankId='+treeNode.classId+'&classId=0',
                        type: 'post',
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        success: function(data){
                            var newID = data.data; //获取新添加的节点Id
                            if(newID>0) {
                                zTree.addNodes(treeNode, {classId: newID, upperRankId: data.errorDetail, classifyName: addName}); //页面上添加节点
                                var node = zTree.getNodeByParam("classId", newID, null); //根据新的id找到新添加的节点
                                zTree.selectNode(node); //让新添加的节点处于选中状态
                            }
                            else
                            {
                                layer.msg("添加失败！")
                            }
                        }
                    });
                }
            });
        });
    };
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
    };
    function selectAll() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
    }
    var zNodes = [[${classifyList}]];
    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        var zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
        var node = zTree_Menu.getNodeByParam("classId",78 );
        //zTree_Menu.selectNode(node,true);//指定选中ID的节点
        zTree_Menu.expandNode(node, true, false);//指定选中ID节点展开
        $("#selectAll").bind("click", selectAll);
    });
    //-->
</script>
</body>

</html>
